<template>
  <div
    class="topic-nav bg-white color-[#555] w-100vw h-70px border-t border-solid border-gray-300 border-b-0 border-l-0 border-r-0 shadow-md pl-60 pr-60 flex justify-between items-center sticky top-0 z-50"
  >
    <div class="btn-quit flex items-center h-full">
      <el-icon size="23"><ArrowLeft /></el-icon>
      <span class="ml-2 text-lg">退出答题</span>
    </div>
    <div class="title text-lg">模拟测试-哈哈哈哈哈哈</div>

    <div class="btnSubmit-countDown flex items-center gap-4">
      <div class="countDown text-lg font-semibold text-red-500">
        {{ timeFormat.hours }}:{{ timeFormat.minutes }}:{{ timeFormat.seconds }}
      </div>
      <el-button type="primary">交卷</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ArrowLeft } from "@element-plus/icons-vue";
const { timeFormat, Start, Pause } = useCountDown({
  diffTime: 30 * 60 * 1000,
  onEnd: () => {
    console.log("考试时间结束");
  },
});
onMounted(() => {
  Start();
});
</script>
<style lang="scss" scoped></style>
